import React from "react";
import Link from "next/link";
import { Badge } from "@/components/ui/badge";

type Props = {
	_id: string;
	name: string;
	total?: number;
	showCount?: boolean;
};

export default function RenderTag({
	_id,
	name,
	total,
	showCount = true,
}: Props) {
	return (
		<Link
			href={`/tags/${_id}`}
			className="flex justify-between gap-2 subtle-medium"
		>
			{/* uppercase 文本都大写 */}
			<Badge className="bg-light-800 text-light-400 dark:bg-dark-300 dark:text-light-500 rounded-md py-2 px-4 uppercase">
				{name}
			</Badge>

			{showCount && (
				<span className="text-dark-500 dark:text-light-700 small-medium">
					{total}+
				</span>
			)}
		</Link>
	);
}
